Do you ever see an animation and think, "Wow, that feels good"? Or maybe you've seen one and thought, "This doesn't feel great"? Can you actually describe what makes the difference? In this lesson, I'll explain why some animations feel better than others.

What's the difference?

Does this animation feel good to you?

Obviously not. How about this one? It feels better, right?

Why is that? The second one uses an easing type that works better with this type of animation, which helps make it feel more natural. The first one has a linear timing function, which feels robotic and unnatural as almost nothing in the world around us moves at a constant speed.

We can say that an animation feels right when it feels natural. The UI is then predictable and more delightful to use.

Apple understand this. When you look at the Dynamic Island for example, it feels like a living organism. The whole iOS UI feels very alive as well.

This natural motion makes things easier to understand and is a major reason why mobile apps often feel better than web apps. Changes in web apps often occur instantly, which can make the experience feel artificial and unfamiliar, since nothing in the real world disappears or appears instantly.

Meaning

The fact that motion helps make the experience feel better doesn't mean that we have to animate everything on the screen. In order for an animation to feel right it also has to have a meaning. It should link actions to consequences in a logical and understandable way.

Here we have a few cards that we will build together in the framer motion part of the course. If we click on one of them a more detailed view will be opened. Not only do we get something that arguably looks pretty nice, but there's also a clear relationship between those two states.

Or a menu animation that I implemented at Vercel. We are translating the elements out and into the view. The animations are also direction-aware, meaning that if we hover on an element on the right, the new items will enter from the right, and old items will exit to the left, making the UI feel more intuitive

There's also the animation I implemented for the theme transition. While not essential, it does add a cool effect. However, not everyone wants to wait 1500ms for the theme to change. Animations can make your product more enjoyable to use, but they can also quickly become overwhelming. We'll discuss this balance later in the course.

Taste

Another important ingredient that makes an animation feel right is taste, arguably the hardest one to master.

I strongly believe that taste is a skill that can be developed and refined through practice. If you are a designer, I'm sure when you look at your first designs, you will think that they are not that great. That's because your taste has evolved. Same goes for motion design. We will talk about how you can improve your taste and how I did it for myself.

Additional layer of extraction

Now if this was a course about animations and interactions on touch screens, this would've been much easier. Because you can borrow many gestures from the physical world like swiping a book which on iOS is used to navigate between pages.

However, on the web, there's an additional layer of extraction; we rely on a mouse and keyboard to navigate, which makes creating natural, fluid, and intuitive interfaces more challenging. The technology is making it harder as well. Creating delightful animations and interactions is much easier with SwiftUI than it is on the web.

We can still achieve pretty good results though, by using the right easing or even spring animations. Consider moving an object from point A to point B with an ease-in type of easing, which starts slow and speeds up. This isn't quite how objects behave in the real world. For example, a car needs to accelerate before reaching its top speed, and then it must decelerate before coming to a stop.

In this case, we can use an ease-in-out curve, which has a similar acceleration and deceleration to a car. The difference might be subtle, yet it significantly alters the feel of the animation, even if you don't consciously notice it.

After all, the right feeling we get from an animation is just a result of getting every aspect of it right, from easing and timing to performance and purpose. The goal of this part is to outline the rules that, when followed, will make your animations feel elegant, natural and intuitive, even on the web.